/*
 * @Author: ZARR 
 * @Date: 2018-03-30 10:06:38 
 * @Last Modified by: LIWEI
 * @Last Modified time: 2018-08-12 22:39:40
 * @功能: 官网Foooter组件 
 */

<template>
  <Footer>
      <div class="container">
      	 <div class="item" v-for="(list, index) in listData" :key="index">
      	 	<div class="nameContent">
      	 		<p class="listName" :class="[{'active' : activeIndex == index},{'noBom' : index === listData.length - 1}]" @click="openItem(index)">{{list.name}}</p>
      	 	</div>
      	 	
      	 	<div class="list" :class="{'listOpen' : activeIndex == index}">
	      	 	<div class="itemContent">
	      	 		<a  :href="item.url" v-for="(item, itemIndex) in list.listItem" :key="itemIndex" :target="item.target ? 'blank' : ''">{{item.itemName}}</a>
					<img src="https://cdn.swellpro.cn/wx.jpg" alt="微信公众号" v-if="index == listData.length - 1">
	      	 	</div>
      	 	</div>
      	 </div>
      	 <div class="bottom">
      	 	<div class="bottomContent">
      	 		<p>版权所有2018 斯威普科技有限公司</p>
      	 		<div class="others">
      	 			<a href="http://www.miitbeian.gov.cn/state/outPortal/loginPortal.action" style="padding-left:0px" class="rightBor">粤ICP备17148140号</a>
      	 			<a href="" class="rightBor">隐私权政策</a>
      	 			<a href="" class="rightBor">使用条款</a>
      	 			<a href="https://www.swellpro.com">英文站</a>
      	 		</div>
      	 	</div>
      	 </div>
      </div>
  </Footer>
</template>

<script>
export default {
	props:{
		isMobile:{
			required: true,
			default: false
		}
	},
	data(){
		return {
			listData:[{
                name: '公司',
                listItem: [
                   {itemName: '关于我们',url: ''},
                   {itemName: '新闻',url: ''},
                   {itemName: '微博',url: 'https://weibo.com/p/1006065940947975/home?from=page_100606&mod=TAB#place', target:true},
                   {itemName: '联系我们',url: '/contact.html'}
                ]
              },{
                name: '购买',
                listItem: [
                   {itemName: '斯威普天猫旗舰店',url: 'https://swellpro.tmall.com/?spm=a220o.1000855.w15914388-17761610790.2.64243b87x93qpW&scene=taobao_shop', target:true},
                   {itemName: '寻找经销商',url: ''},
                   {itemName: '成为经销商',url: ''},
                   {itemName: '保修政策',url: ''}
                ]
              },{
                name: '产品',
                listItem: [
                   {itemName: '水手3旗舰版',url: '/waterproof-splash-drone-3-auto.html'},
                   {itemName: '水手3钓鱼版',url: '/waterproof-splash-drone-3-fisherman.html'},
                   {itemName: '无人机充电站45K',url: '/dronepower-45K.html'},
                   {itemName: '雨燕便携防水无人机',url: '/spry.html'},
                ]
              },{
                name: '关注我们',
                listItem: [
				   {itemName: '微信公众号',url: ''},
                ]
              }
			],
			activeIndex: -1, //控制底部栏是否打开,
			lastIndex: -1 //记录上一次打开的index
		}
	},
	methods:{
		openItem(index){
			if(index == this.activeIndex){
				this.activeIndex = -1;
				return ;
			}
			this.activeIndex = index;
		}
	}
    
}
</script>

<style lang="stylus" scope>
Footer
	background #1f2024
	padding 30px 0
	font-weight 100
	>.container
		display flex
		flex-flow row wrap
		.item
			flex 0 0 25%
			color #fff
			.listName
				font-size 20px
				font-weight 100
			.list
				overflow hidden
				margin-top 30px
				a
					display block
					color #fff
					line-height 30px
					font-size 15px
					font-weight 100
				.formName
					display block
					color #fff
					line-height 30px
					font-size 15px
					font-weight 100
				form
					input
						width 210px
						height 30px
						margin 5px 0
						padding-left 8px
						font-size 13px
					#submit
						height 30px
						width 120px
						background #0d85f1
						color #fff
						border none
						font-size 16px
						font-weight 100
				.itemContent
					img
						width 100px
		.bottom
			flex 0 0 100%
			box-sizing border-box
			margin-top 30px
			font-weight 100
			.bottomContent
				border-top 1px solid rgba(255,255,255,.3)
				box-sizing border-box
				padding 15px 0px
				color #909699
				.others
					margin-top 10px
					a
						color #909699
						padding 0 15px
					.rightBor
						position relative
						&:after
							content ''
							position absolute
							width 1px
							background #909699
							right 0px
							height 15px
							top 2px
@media (max-width: 600px)
	Footer
		color #fff
		#submit
			position relative
			left -51px
		>.container
			display block
			padding 0px
			.item
				width 100%
				.nameContent
					padding 0 15px
					.listName
						font-size 12px
						padding 18px 0
						border-bottom 1px solid rgba(255,255,255,.3)
						position relative
						box-sizing border-box
						font-size 18px
						font-weight 100
						&:after,&:before
							content ''
							position absolute
							width 8px
							height 1px
							background #ebeff2
							top 25px
							right 15px
						&:after
							transition all .6s
							transform rotate(90deg)
					.noBom
						border-bottom none
					.active
						&:after
							transform rotate(0deg)
				.list
					max-height 0px
					margin 0px
					transition all .6s
					padding 0 30px
					background #494b4d
					.itemContent
						padding 10px 0
						a
							font-size 13px
							margin 8px 0
							color #909699
				.listOpen
					max-height 500px
			.bottom
				.bottomContent
					font-size 12px
					padding-left 15px
					.others
						margin-top 10px
						a
							font-size 12px
			#form
				padding 25px 0
				text-align center
				.list
					max-height 500px
					background #1f2024
					.formName
						color #909699
						margin 6px 0 14px
				.mainName
					font-size 20px
					margin 8px 0
					font-weight 100			
</style>
